<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">-->
    <title>隐藏滚动条</title>


    <style>
        #webkitDiv {
            width: 200px;
            height: 400px;
            overflow: scroll;
            display: inline-block;
        }

        #webkitDiv::-webkit-scrollbar {
            display: none;
        }

        /*兼容性写法*/

        .outer-container {
            position: relative;
            /*overflow: hidden;*/
            margin: 0 auto;
            overflow: hidden;
            display: inline-block;
        }

        .inner-container {
            position: absolute;
            left: 0;
            overflow-x: hidden;
            /*content超出y,x轴产生滚动条。滚动条有一定宽度，导致大于父元素outer的宽。父元素实行超出隐藏*/
            overflow-y: scroll;
        }

        .outer-container, .content {
            width: 200px;
            height: 200px;
        }

        /* for Chrome 这个不写也可以，谷歌本身支持上方写法。但建议书写，以便移除掉滚动条，不产生额外的宽度。*/
        /*.inner-container::-webkit-scrollbar {*/
        /*display: none;*/
        /*}*/
    </style>

</head>
<body>
<!--滚动条隐藏大法-->
<!--webkit内核浏览器使用css3伪元素选择器：-webkit-scrollbar。-->
<div id="webkitDiv"></div>

<div class="outer-container">
    <div class="inner-container">
        <div class="content">
        </div>
    </div>
</div>
<script>
    function getHan() {
        return String.fromCharCode((0x4E00 + Math.random() * (0x9FA5 - 0x4E00) >> 0));
    }

    function getListHtml() {

        var listHtml = "";
        for (var i = 0; i < 50; i++) {
            //随机基本汉字
            var text = getHan() + getHan() + getHan();
            listHtml += "<p>" + text + i + "</p>";
        }
        return listHtml;
    }

    document.getElementById("webkitDiv").innerHTML = getListHtml();
    document.querySelector(".outer-container .content").innerHTML = getListHtml();
</script>
</body>
</html>